<!-- 选择标签弹框 -->
<!-- 小瓜子 更新于 2020/08/25 -->

<!-- 小瓜子 更新于 2020/08/25 -->
<!-- 优化标签选择方法 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->
<template>
	<view class="popup_box" :style="'height:' + screenHeight*0.7 + 'px;'">
		<view class="main_tags">
			<view class="title"><text>主标签</text></view>
			<view class="tags_content">
				<view class="each_tag" :class="item.selected ? 'sl_tag' : ''" @tap="selectTag(index)" :key="index" v-for="(item,index) in tags">
					#{{item.tagName}}
				</view>
			</view>
			<view class="close" @tap="confirm">×</view>
		</view>
		<view class="my_tags">
			<view class="title"><text>自建标签</text><text style="font-size: 14px; color: #7F7F7F;">选填</text></view>
			<input type="text" class="uni-input" v-model="thisMyTag" placeholder="请输入5字以内标签" maxlength="5" />
		</view>
		<view class="mt" v-show="thisMyTag || myTag" @tap="removeMyTag">
			#{{thisMyTag ? thisMyTag : myTag}}
		</view>
		<view class="confirm_btn" @tap="confirm">确认</view>
	</view>
</template>

<script>
	export default {
		props: {
			tags: {
				type: Array,
				default: []
			},
			myTag: {
				type: String,
				default: '哈哈哈'
			},
			screenHeight: 0,
			screenWidth: 0
		},
		data() {
			return {
				selectTagIndex: [],
				count: 0,
				thisMyTag: ''
			}
		},
		inject: ['popup'],
		methods: {
			selectTag(index) {
				// 设置一个指针count，让其循环地指向selectTagIndex的元素
				// 每次触发点击事件，都更新一次selectTagIndex，将最新被选中的元素下标放进去
				let findId = this.selectTagIndex.findIndex(item => {return item==index})
				if (findId == -1){
					this.selectTagIndex[this.count] = index;
					this.count = this.selectTagIndex.length;
				}else {
					this.selectTagIndex.splice(findId,1);
					this.count = this.selectTagIndex.length;
				}
				if (this.count > 1) {
					this.count = 0
				}
				this.tags.forEach((item,_index) => {
					if(_index == this.selectTagIndex[0] || _index == this.selectTagIndex[1]) {
						item.selected = true;
					}else {
						item.selected = false;
					}
				})
			},
			// 点击确认按钮
			confirm() {
				// 将选中的标签放入一个变量，并将其传给页面
				let mainTags = [];
				this.$props.tags.forEach(item => {
					if(item.selected == true) {
						mainTags.push(item);
					}
				})
				this.$emit('refreshTags',{
					mainTags: mainTags,
					// 将自建标签传给页面
					myTag: this.thisMyTag ? this.thisMyTag : this.$props.myTag
				});
				// 关闭弹窗
				this.popup.close()
			},
			// 移除自建标签
			removeMyTag() {
				this.$props.myTag = '';
				this.thisMyTag = ''
			}
		}
	}
</script>

<style lang="less">
	.popup_box {
		background-color: #FFFFFF;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		padding: 20px 0;
		.title {
			margin-bottom: 6px;
			margin-left: 10px;
			font-size: 18px;
		}
		.main_tags {
			position: relative;
			.tags_content {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-bottom: 20px;
				.each_tag {
					padding: 2px 10px;
					display: inline-block;
					border: 1px solid #9f9f9f;
					border-radius: 20px;
					color: #7f7f7f;
					font-size: 14px;
					margin: 3px 7px;
				}
				.sl_tag {
					background-color: @g-pink;
					color: #FFFFFF;
					border: 1px solid #FFFFFF;
				}
			}
			.close {
				position: absolute;
				top: -10px;
				right: 10px;
				font-size: 24px;
				
			}
		}
		.my_tags {
			.uni-input {
				width: 80%;
				padding: 5px;
				margin-left: 10px;
				font-size: 14px;
				border-radius: 5px;
				background-color: @g-background;
			}
		}
		.mt {
			padding: 2px 10px;
			display: inline-block;
			border: 1px solid #FFFFFF;
			border-radius: 20px;
			color: #FFFFFF;
			font-size: 14px;
			margin: 10px 7px;
			background-color: @g-pink;
		}
		.confirm_btn {
			position: fixed;
			bottom: 10px;
			left: calc(50% - 100rpx);
			width: 100px;
			height: 35px;
			color: #FFFFFF;
			border-radius: 5px;
			background-color: @g-pink;
			line-height: 35px;
			text-align: center;
			font-size: 18px;
		}
	}
</style>
